<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-inline">
								<input type="text" name="name" placeholder="" class="layui-input">
							</div>
						</div>
						<!-- <div class="layui-form-item layui-inline">
							<label class="layui-form-label">性别</label>
							<div class="layui-input-inline">
								<input type="text" name="real_name" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">邮箱</label>
							<div class="layui-input-inline">
								<input type="text" name="real_name" placeholder="" class="layui-input">
							</div>
						</div> -->
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="data-table" lay-filter="data-table"></table>
			</div>
		</div>



		<script type="text/html" id="user-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		        <i class="layui-icon layui-icon-add-1"></i>
		        新增
		    </button>
		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		        <i class="layui-icon layui-icon-delete"></i>
		        删除
		    </button>
			<!-- <button class="pear-btn pear-btn-md" lay-event="recycle">
		        <i class="layui-icon layui-icon-delete"></i>
		        回收站
		    </button> -->
		</script>

		<script type="text/html" id="user-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>

		<script type="text/html" id="user-status">
			<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-status" {{ d.status== true ? 'checked' : '' }} />
		</script>

		<script type="text/html" id="user-sex">
			{{#if (d.sex == 1) { }}
		    <span>男</span>
		    {{# }else if(d.sex == 2){ }}
		    <span>女</span>
		    {{# } }}
		</script>

		<script type="text/html" id="user-login">
			{{#if (d.login == 0) { }}
		    <span>在线</span>
		    {{# }else if(d.sex == 1){ }}
		    <span>离线</span>
		    {{# } }}
		</script>

		<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>



		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../lms/base64.js"></script>
		<!-- <script src="../../lms/md5.js"></script> -->
		<script src="../../lms/common.js"></script>
		<script src="../../lms/config.js"></script>



		<script>
			//鹰：
			if(!checkLogin()) {
				location.href = lms_config.base_path + "/login.html";
			}



			layui.use(['table', 'form', 'jquery','common', 'http'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
				
				const http = layui.http;
				


				let MODULE_PATH = "user/";

				let cols = [
					[{
							type: 'checkbox'
						},
						{
							title: 'id',
							field: 'id',
							align: 'center',
                            sort: true, 
                            unresize: true,
							width: 60
						},
						{
							title: '账号',
							field: 'account',
							align: 'center',
							width: 100
						},
						{
							title: '姓名',
							field: 'real_name',
							align: 'center',
							width: 100
						},
						{
							title: '角色',
							field: 'roles',
							align: 'center',
							//templet: '#user-sex'
						},
						{
							title: '上次登录时间',
							field: 'last_time',
							align: 'center'
						},
						{
							title: '上次登录IP',
							field: 'last_ip',
							align: 'center'
						},
						{
							title: '启用',
							field: 'status',
							align: 'center',
							width: 100,
							templet: '#user-status'
						},
						/*{
							title: '登录',
							field: 'login',
							align: 'center',
							templet: '#user-login'
						},
						{
							title: '注册',
							field: 'createTime',
							align: 'center',
							templet: '#user-createTime'
						},*/
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'center',
							width: 120
						}
					]
				]


				window.render = function(where) {
					//console.log("window.render", where)
					$request({
						url: lms_config.api_url + "/adminapi/v1/setting/User",
						type: 'GET',
						//contentType: 'application/json',
						data: where,
						//headers: {Authorization: getUserInfo()["token"]},
						dataType: 'json',
					}).then(function(ret) {
						for(let item in ret.data) {
							ret.data[item].userId = ret.data[item].id;
							//ret.data[item].enable = ret.data[item].status;
							ret.data[item].username = ret.data[item].account;
							ret.data[item].realName = ret.data[item].real_name;
							//ret.data[item].password = "";
							//ret.data[item].salt = null;
							//ret.data[item].status = null;
							//ret.data[item].email = "";
							//ret.data[item].avatar = null;
							//ret.data[item].sex = 1;
							//ret.data[item].phone = "";
							//ret.data[item].login = 1;
							//ret.data[item].roleIds = null;
						}

						table.render({
							elem: '#data-table',
							page: true,
							cols: cols,
							skin: 'line',
							toolbar: '#user-toolbar',
							defaultToolbar: [{
								title: '刷新',
								layEvent: 'refresh',
								icon: 'layui-icon-refresh',
							}, 'filter', 'print', 'exports'],

							data: ret.data,

							//url: lms_config.api_url + "/adminapi/v1/setting/User",
							//headers: {Authorization: getUserInfo()["token"]},
							//parseData: function(ret){return ret;}, //ret 即为原始返回的数据

						});

					}).catch(function(ret) {
						layer.msg("出错[" + ret.status + "]：" + ret.responseText, {
							icon: 2,
							//icon: 5,
							time: 1000
						});

						//console.error(ret);
						// alert("出错" + ret.status + "：" + ret.responseText);
					});
				}
				window.render();



				//弹出窗设置 自己设置弹出百分比
				function screen() {
					if (typeof width !== 'number' || width === 0) {
						width = $(window).width() * 0.8;
					}
					if (typeof height !== 'number' || height === 0) {
						height = $(window).height() - 20;
					}
					return [width + 'px', height + 'px'];
				}
				

				/// 鹰：访问接口
				/*$.ajax({
					url: lms_config.api_url + "/adminapi/v1/setting/User", // 请求路径
					type: "GET", //请求方式
					//headers: {Authorization: getUserInfo()["token"]},
					contentType: 'application/x-www-form-urlencoded',
					//data: data.field, //请求参数
					dataType: 'json', //设置接受到的响应数据的格式

					success: function (ret) {

						if(ret.code !== 0) {
							//popup.failure(ret.msg, function() {
								//location.href = lms_config.base_path + "/index.html"
							//});
                            layer.msg("没有此用户或用户出错", {
                                icon: 2,
                                //icon: 5,
                                time: 1000
                            }, function() {
								//location.href = lms_config.base_path + "/index.html"
							});
							return;
						}
						

					}, //响应成功后的回调函数
					error: function (ret) {
						console.error(ret);
						alert("出错" + ret.status + "：" + ret.responseText);
					}, //表示如果请求响应出现错误，会执行的回调函数

				});
				*/



				table.on('tool(data-table)', function(obj) {
					if (obj.event === 'remove') {
						window.remove(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});

				table.on('toolbar(data-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
                    } else if (obj.event === 'recycle') {
                        window.recycle(obj);
                    }
				});

				form.on('submit(user-query)', function(data) {
					window.render(data.field);
					//table.reload('data-table', {
					//	where: data.field
					//});

					//console.log("submit(user-query", data.field);
					//console.log("data:", data);
					return false;
				});

				form.on('switch(user-status)', function(data) {
					//layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);

					var status = data.elem.checked ? 1 : 0;
					var id = this.value;
					var load = layer.load();
					/*$.ajax({
						url: lms_config.api_url + "/adminapi/v1/setting/User/" + id,
						type: 'PUT',
						headers: {Authorization: getUserInfo()["token"]},
						//contentType: 'application/json',
						data: { status: status },
						dataType: 'json',
						
						success: function (ret) {
							layer.close(load);
							if (ret && ret.code == 0) {
								layer.msg(ret.msg, {
									icon: 1,
									time: 1500
								});
							} else {
								layer.msg(ret.msg, {
									icon: 2,
									//icon: 5,
									time: 1500
								}, function () {
									$(data.elem).prop('checked', !$(data.elem).prop('checked'));
									form.render();
								});
							}
						},
						error: function (ret) {
							console.error(ret);
							alert("出错" + ret.status + "：" + ret.responseText);
						}, //表示如果请求响应出现错误，会执行的回调函数
					});*/

					$request({
						url: lms_config.api_url + "/adminapi/v1/setting/User/" + id,
						type: 'PUT',
						//contentType: 'application/json',
						data: { status: status },
						dataType: 'json',
					}).then(function(ret) {
						layer.close(load);
						if (ret && ret.code == 0) {
							layer.msg(ret.msg, {
								icon: 1,
								time: 1500
							});
						} else {
							layer.msg(ret.msg, {
								icon: 2,
								//icon: 5,
								time: 1500
							}, function () {
								$(data.elem).prop('checked', !$(data.elem).prop('checked'));
								form.render();
							});
						}
					}).catch(function(ret) {
						console.error(ret);
						alert("出错" + ret.status + "：" + ret.responseText);
					});

					//console.log(data);
					//console.log(data.elem.checked);
				});

				window.add = function() {
					layer.open({
						type: 2,
						maxmin: true,
						title: '新增',
						shade: 0.1,
						//area: [common.isModile()?'100%':'500px', common.isModile()?'100%':'400px'],
                		area: screen(),
						content: MODULE_PATH + 'add.html?operation=add'
					});
				}

				window.edit = function(obj) {
					layer.open({
						type: 2,
						title: '修改',
						shade: 0.1,
						//area: ['500px', '400px'],
                		area: screen(),
                		content: MODULE_PATH + 'add.html?operation=edit&id=' + obj.data.id
					});
				}

				window.remove = function(obj) {
					layer.confirm('确定要删除该用户', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: lms_config.api_url + "/adminapi/v1/setting/User/" + obj.data['id'],
							type: 'DELETE',
							headers: {Authorization: getUserInfo()["token"]},
							//contentType: 'application/json',
							//data: { "data": obj.data['id'] },
							dataType: 'json',
							
							success: function(ret) {
								layer.close(loading);
								if(ret && ret.code==0) {
									layer.msg(ret.msg, {
										icon: 1,
										time: 1000
									}, function() {
										obj.del();
									});
								}
								else {
									layer.msg(ret.msg, {
										icon: 2,
										//icon: 5,
										time: 1000
									});
								}
							},
							error: function (ret) {
								console.error(ret);
								alert("出错" + ret.status + "：" + ret.responseText);
							}, //表示如果请求响应出现错误，会执行的回调函数
						})
					});
				}

				window.batchRemove = function(obj) {
					
					//方法1：直接获得所有选择的ID
					let checkIds = common.checkField(obj,'userId');
					if (checkIds === "") {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}
					
					//方法2：获得所有选择的项目及其所有属性
					/*
					let checkIds = '';
					let data = table.checkStatus(obj.config.id).data;
					if (data.length === 0) {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}
					for (let i = 0; i < data.length; i++) {
						checkIds += data[i].id + ",";
					}
					checkIds = checkIds.substr(0, checkIds.length - 1);
					*/



					layer.confirm('确定要删除这些用户', {
						icon: 3,
						title: '提示'
					}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url: lms_config.api_url + "/adminapi/v1/setting/User/" + checkIds.replace(',', '_'),
							type: 'DELETE',
							headers: {Authorization: getUserInfo()["token"]},
							//contentType: 'application/json',
							//data: { "data": checkIds },
							dataType: 'json',

							success: function(ret) {
								layer.close(loading);
								if(ret && ret.code == 0) {
									layer.msg(ret.msg, {
										icon: 1,
										time: 1000
									}, function() {
										window.render();
										//table.reload('data-table');
									});
								} else {
									layer.msg(ret.msg, {
										icon: 2,
										//icon: 5,
										time: 1000
									});
								}
							},
							error: function (ret) {
								console.error(ret);
								alert("出错" + ret.status + "：" + ret.responseText);
							}, //表示如果请求响应出现错误，会执行的回调函数
						})
					});
				}

                window.recycle = function() {
                    layer.open({
                        type: 2,
                        maxmin: true,
                        title: '回收站',
                        shade: 0.1,
                        area: screen(),
                        content: MODULE_PATH + 'recycle',
                        cancel: function () {
							window.render();
                            //table.reload('data-table');
                        }
                    });
                }

				window.refresh = function(param) {
					window.render();
					//table.reload('data-table');
					///top.location.reload();
					///parent.location.reload();
				}
			})
		</script>
	</body>
</html>
